<template>
    <div class="warn-list">
        <div class="warn-wcontent">
            <div class="warn-content">
                <h3 class="warn-title displayFlex flexCenter">{{warnContent.title}}</h3>
                <ol class="warn-items-wrap">
                    <li v-for="(value,key) in warnContent.listMsg">{{key+1}}.{{value}}</li>
                </ol>
                <div class="sure-btn displayFlex flexCenter" @click="$emit('clickFn')">
                    {{warnContent.btnText}}
                </div>
            </div>
        </div>
        <v-bord>
            <div slot="cantClick" @click="$emit('clickFn')" class="com_black"></div>
        </v-bord>
    </div>
</template>

<script>
    export default {
        name: "Warn",
        props:{
            warnContentProps:{
                type:Object
            }
        },
        data(){
            return{
                warnContent:{
                    title:'金币使用规则',
                    listMsg:[
                        '金币满100可用；',
                        '100金币抵1元；',
                        '金币抵扣不得超过每笔订单应付金额的50%；',
                    ],
                    btnText:'我知道了'
                },
            }
        },
        mounted() {
            this.warnContent = Object.assign({},this.warnContent,this.warnContentProps);
        },
        watch:{
            warnContentProps(val){
                this.warnContent = Object.assign({},this.warnContent,val);
            }
        },
        components:{
            'v-bord':()=>import('../alert/Bord'),
        }
    }
</script>

<style scoped>
    .warn-content{
        position: relative;
        width: 100%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
        background-color: #fff;
        border-radius: 5px;
    }
    .warn-wcontent{
        width: 80%;
        height: 1px;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 1050;
    }
    .warn-title{
        text-align: center;
        letter-spacing: 1px;
        padding: .2rem .2rem 0;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .warn-items-wrap{
        padding: .1rem .2rem;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        line-height: .2rem;
    }
    .sure-btn{
        border-top: 1px solid #E0E0E0;
        width: 100%;
        height: .5rem;
        line-height: .5rem;
        color: #56B78C;
        font-size: .15rem;
    }
</style>